import {
    IonContent,
    IonPage,
    IonLabel,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonList,
    IonItemSliding,
    IonItem,
    IonInput,
    IonAlert,
    IonRadioGroup,
    IonRadio,
    IonButton
} from '@ionic/react';
import React, { useState } from 'react';
import global_variable from '../shared/global_variable.json';

var id = "";
var TenantId = "";
var isLoading = true;
var arrCookie = document.cookie.split(';');
var accountid = "";
for (var i = 0; i < arrCookie.length; i++) {
    var arr = arrCookie[i].split("=");
    //找到名称为userId的cookie，并返回它的值
    if ("userid" === arr[0].trim()) {
        accountid = arr[1];
    }
}
// 获取cooike的值
var urls = global_variable.url + "/CustomerBaseInfosApp/GetAll?CustomerAccountIdFilter=" + accountid + "&SkipCount=0&MaxResultCount=10";

const BaseInfo: React.FC = () => {
    const [username, setUsername] = useState('');
    const [phoneNum, setPhoneNum] = useState('');
    const [address, setAddress] = useState('');
    const [sex, setSex] = useState('');
    const [company, setCompany] = useState('');
    const [age, setAge] = useState('');
    const [showAlert1, setShowAlert1] = useState(false);

    if (isLoading) {
        // 查询基本信息
        fetch(urls, {
            method: 'GET'
        })
            .then(response => response.json())
            .then(responseJson => {
                if (responseJson.result.items.length > 0) {
                    let base_info = responseJson.result.items[0].customerBaseInfo;
                    setUsername(base_info.name);
                    setPhoneNum(base_info.phoneNum);
                    setAge(base_info.age);
                    setAddress(base_info.address);
                    setCompany(base_info.company);
                    setSex(base_info.sex);
                    id = base_info.id;
                    TenantId = base_info.TenantId;
                    isLoading = false;
                }
            });
    }

    // 修改基本信息
    const UpdateBaseInfo = async (e: React.FormEvent) => {
        e.preventDefault();
        let update_url = global_variable.url + "/CustomerBaseInfosApp/CreateOrEdit";
        let update_fromData = { name: username, phoneNum: phoneNum, sex: sex, company: company, address: address, age: age, id: id, TenantId: TenantId };
        let update_data = {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
            body: JSON.stringify(update_fromData)
        };
        fetch(update_url, update_data)
            .then(response => response.json())
            .then(function (data) {
                if (data.success) {
                    setShowAlert1(true);
                }
            })
    }

    return (
        < IonPage >
            <IonHeader style={{ textAlign: 'center' }}>
                <IonToolbar color="primary">
                    <IonTitle>基本信息</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent>
                {/* 提示框 */}
                <IonAlert
                    isOpen={showAlert1}
                    onDidDismiss={() => setShowAlert1(false)}
                    header={'提示'}
                    message={'修改成功!'}
                    buttons={['确定']}
                />
                <form noValidate onSubmit={UpdateBaseInfo}>

                    <IonList>
                        <IonItemSliding>
                            <IonItem>
                                <IonLabel style={{ fontSize: '14px', color: "darkgray" }}> 姓名：</IonLabel>
                                <IonInput name="username" type="text" value={username} onIonChange={e => setUsername(e.detail.value!)}
                                    required>
                                </IonInput>
                            </IonItem>
                        </IonItemSliding>

                        <IonItemSliding>
                            <IonItem>
                                <IonLabel style={{ fontSize: '14px', color: "darkgray" }}>电话：</IonLabel>
                                <IonInput name="phoneNum" type="text" value={phoneNum} onIonChange={e => setPhoneNum(e.detail.value!)}
                                    required>
                                </IonInput>
                            </IonItem>
                        </IonItemSliding>
                        <IonItemSliding>
                            <IonItem style={{ fontSize: '14px', color: "darkgray" }}>
                                <IonLabel>性别：</IonLabel>
                                <IonRadioGroup style={{ marginRight: '20%' }}>
                                    <IonItem lines="none" style={{ display: 'block', float: 'left' }}>
                                        <IonLabel>男</IonLabel>
                                        <IonRadio name='sex' slot="start" value='男' checked={sex === '男' ? true : false} onIonSelect={e => setSex(e.detail.value!)} />
                                    </IonItem>
                                    <IonItem lines="none" style={{ display: 'block', float: 'right', marginLeft: '-20%' }}>
                                        <IonLabel>女</IonLabel>
                                        <IonRadio name='sex' slot="start" value='女' checked={sex === '女' ? true : false} onIonSelect={e => setSex(e.detail.value!)} />
                                    </IonItem>
                                </IonRadioGroup>
                            </IonItem>
                        </IonItemSliding>
                        <IonItemSliding>
                            <IonItem lines="full">
                                <IonLabel style={{ fontSize: '14px', color: "darkgray" }}>年龄：</IonLabel>
                                <IonInput name="age" type="number" value={age} onIonChange={e => setAge(e.detail.value!)}
                                    required>
                                </IonInput>
                            </IonItem>
                        </IonItemSliding>
                        <IonItemSliding>
                            <IonItem>
                                <IonLabel style={{ fontSize: '14px', color: "darkgray" }}>公司：</IonLabel>
                                <IonInput name="company" type="text" value={company} onIonChange={e => setCompany(e.detail.value!)}
                                    required>
                                </IonInput>
                            </IonItem>
                        </IonItemSliding>
                        <IonItemSliding>
                            <IonItem>
                                <IonLabel style={{ fontSize: '14px', color: "darkgray" }}>地址：</IonLabel>
                                <IonInput name="address" type="text" value={address} onIonChange={e => setAddress(e.detail.value!)}
                                    required>
                                </IonInput>
                            </IonItem>
                        </IonItemSliding>
                    </IonList>
                    <IonButton type="submit" expand="block">完成</IonButton>

                </form>
            </IonContent >
        </IonPage >
    );
};
export default BaseInfo;